<template>
	<div class="wrapper">
		<view class="info-wrapper">
			<view class="flex--justify" style="display: flex;justify-content: start;align-items: center;">
				<view class="info-item flex--justify" >
					 <u-avatar :src="src"></u-avatar>
				</view>
				<view class="info-item info-item-right">
					<view>{{name}}</view>
					<view class="infoCode">{{infoId}}
						<span><uv-icon :name="copy" size="10" @click="copyInfoId(infoId)"></uv-icon></span>
					</view>
				</view>
			</view>
			
			<view class="wallet-wrapper">
				<view class="wallet">
					<view class="wallet-item-left">
						<view class="wallet-item-title">
							账户余额
							<span class="eye" @click="switchBalanceShow" v-if="balanceShowFlg?true:false"><uv-icon name="eye-fill" color="#fff" size="18"></uv-icon></span>
							<span class="eye-hidden" @click="switchBalanceShow" v-if="!balanceShowFlg?true:false"><uv-icon name="eye-off" color="#fff" size="18"></uv-icon></span>
						</view>
						<view class="amount" v-if="balanceShowFlg">{{toFixedNum(balance)}}</view>
						<view class="amount amount-hidden" v-if="!balanceShowFlg">***</view>
					</view>
					<view class="wallet-item-right" @click="nav('/pages/earnings/index')">
						查看余额
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="function-wrapper">
			<view class="title">功能</view>
			<view class="function-item">
				<u-grid :col="4" :border="false">
					<template v-for="(item, index) in functionIcon">
						<u-grid-item @click="nav(item.routerLink)" v-if="item.isShow">
							<u-icon :name="item.imageUrl" :size="54"></u-icon>
							<view class="grid-text margin-t8">{{ item.text }}</view>
						</u-grid-item>
					</template>	
				</u-grid>
			</view>
		</view>
		<view class="service-wrapper">
			<view class="title">服务</view>
			<view class="service-item">
				<u-grid :col="4" :border="false">
					<template v-for="(item, index) in serviceIcon">
						<u-grid-item @click="nav(item.routerLink)" v-if="item.isShow">
							<u-icon :name="item.imageUrl" :size="54"></u-icon>
							<view class="grid-text margin-t8">{{ item.text }}</view>
						</u-grid-item>
					</template>	
				</u-grid>
			</view>
		</view>
		<!-- <view class="my-center-header">
			<view class="top-title">
				<text class="title-name">个人中心</text>
				<view class="notice" @click="toNotice">
					<image :src="require('@/common/images/home-new/link-msg.png')" />
					<u-badge type="warning" :count="msgNum" absolute :offset="[18, 12]" bgColor="#fff" color="red" size="mini"></u-badge>
				</view>
			</view>
			<div class="my-center-header-info">
				<view class="user flex-align-center">
					<div class="myuserimage">
						<image :src="require('@/common/images/user-icon.png')" />
					</div>
					<div class="myuserinfor flex" @click.stop="toDetail">
						<div class="my-user-info-name">{{ user.agentName ? user.agentName : '' }}({{ user.agentNo }})</div>
					</div>
				</view>
				<view class="header-tab flex">
					<view class="tab-item" v-for="(item, index) in heardTabList" :key="index" @click="itemHandle(item)" v-if="!$store.state.user.isSpecificAccount || !item.isSpecificAccount">
						<image :src="item.icon" class="list-icon" />
						<p class="txt">{{ item.text }}</p>
					</view>
				</view>
			</div>
		</view>
		<view class="my-section">
			<view class="my-section-item flex-space-between" v-for="(item, index) in list" :key="index" @click="itemHandle(item)"
			 v-if="!$store.state.user.isSpecificAccount || !item.isSpecificAccount">
				<view class="left flex-align-center">
					<image :src="item.icon" class="list-icon" />
					<text class="txt">{{ item.text }}</text>
				</view>
				<div class="arrow-r"><i class="iconfont icon-Downarrow-R iconfont-right"></i></div>
			</view>
		</view>
		<view class="logout" @click="logoutHandle">
			<text>安全退出</text>
		</view> -->
		<!-- 拨打电话 -->
		    <a  style="display: none;" href="tel:1234567890" @click="onCall">拨打电话</a>
		<m-s-footer :tabIdx="1" v-if="$store.state.user.isSpecificAccount"></m-s-footer>
		<m-footer :tabIdx="3" v-else></m-footer>
	</div>
</template>

<script>
	import {
		getSysParam
	} from '_a/sms';
	export default {
		name: 'MyInfo',
		data() {
			return {
				name:'',
				infoId:'',
				copy:require('@/common/images/myInfo/copy.png'),
				src: "https://shou-kuanbao.com/agentAppImg/user-icon.png", //http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg
				invitationCode: '',
				heardTabList: [{
						text: '基本资料',
						routerLink: '/pages/myInfo/baseInfo/index',
						routerType: 'path',
						icon: require('@/common/images/myInfo/icon-personal-data.png'),
						isCert: true,
						clickType: 'router'
					},
					{
						text: '修改密码',
						routerLink: '/pages/myInfo/updatePassword/index',
						routerType: 'path',
						icon: require('@/common/images/myInfo/icon-change-password.png'),
						isCert: true,
						clickType: 'router'
					},
					{
						text: '我的结算卡',
						routerLink: '/pages/myInfo/settlementAccount/index',
						routerType: 'path',
						icon: require('@/common/images/myInfo/icon-debit-card.png'),
						isCert: true,
						settle: true,
						clickType: 'router',
						isSpecificAccount: true
					},
				],
				list: [

					{
						text: '隐私政策',
						routerLink: '/pages/login/agreement/index',
						routerType: 'path',
						icon: require('@/common/images/myInfo/icon-privacy-policy.png'),
						clickType: 'router'
					},

					{
						text: '用户协议',
						routerLink: '/pages/login/agreement/index?type=2',
						routerType: 'path',
						icon: require('@/common/images/myInfo/icon-user-agreement.png'),
						clickType: 'router'
					},

					{
						text: '邀请注册',
						routerLink: '/pages/home/invitation/index',
						routerType: 'path',
						icon: require('@/common/images/myInfo/icon-invitation-to-register.png'),
						clickType: 'router'
					}
				],
				value: 50,
				userIndex: 1,
				msgNum: 0,
				functionIcon:[
					{
						routerLink: '/pages/earnings/index',
						imageUrl: require('@/common/images/myInfo/3.png'),
						routerType: 'path',
						text: '钱包',
						isShow: true
					},
					{
						routerLink: '/pages/myInfo/settlementAccount/index',
						imageUrl: require('@/common/images/myInfo/4.png'),
						routerType: 'path',
						text: '结算信息',
						isShow: true
					},
					{
						routerLink: '/pages/home/invitation/index',
						imageUrl: require('@/common/images/home-icon/7.png'),
						routerType: 'path',
						text: '邀请注册',
						isShow: true,
					},
					{
						// routerLink: '/pages/home/myAgent/index',
						imageUrl: require('@/common/images/myInfo/5.png'),
						routerType: 'path',
						text: '更换手机号',
						isShow: false
					},
					{
						// routerLink: '/pages/home/myAgent/index',
						imageUrl: require('@/common/images/myInfo/6.png'),
						routerType: 'path',
						text: '意愿服务商',
						isShow: false
					},
					{
						routerLink: '/pages/home/invitation/down-app',
						imageUrl: require('@/common/images/myInfo/9.png'),
						routerType: 'path',
						text: '下载应用',
						isShow: true
					}
				],
				serviceIcon:[
					{
						routerLink: '/page-subpage/setting/question',
						imageUrl: require('@/common/images/myInfo/7.png'),
						routerType: 'path',
						text: '常见问题',
						isShow: false
					},
					{
						routerLink: 'callPhoneNumber',
						imageUrl: require('@/common/images/myInfo/8.png'),
						routerType: 'path',
						text: '客服热线',
						isShow: false
					},
					{
						routerLink: 'logoutHandle',
						imageUrl: require('@/common/images/myInfo/9.png'),
						routerType: 'path',
						text: '版本更新',
						isShow: true
					},
					{
						routerLink: '/pages/login/agreement/index?type=2',
						imageUrl: require('@/common/images/myInfo/10.png'),
						routerType: 'path',
						text: '用户协议',
						isShow: true
					},
					{
						routerLink: '/page-subpage/setting/aboutUs',
						imageUrl: require('@/common/images/myInfo/11.png'),
						routerType: 'path',
						text: '关于我们',
						isShow: false
					},
					{
						routerLink: '/page-subpage/setting/index',
						imageUrl: require('@/common/images/myInfo/12.png'),
						routerType: 'path',
						text: '设置',
						isShow: true
					}
				],
				balance: 0,
				list:[],
				balanceShowFlg: false //金额显示隐藏
			};
		},
		computed: {
			user() {
				return this.$store.getters.user || {};
			},
			awardInfo() {
				return this.$store.getters.userInfo.wallet || {};
			}
		},
		onLoad() {
			//隐藏下载应用
			// #ifdef APP-PLUS
			// this.functionIcon = this.functionIcon.filter(item => item.text !== '下载应用');
			// #endif
		},
		mounted() {},
		async created() {
			uni.hideTabBar({});
			// this.user = this.$store.getters.user;
		},
		onShow() {
			this.getData();
		},
		// 下拉刷新
		async onPullDownRefresh() {
			this.$store.dispatch('getUserDetail').then(res => {
				uni.stopPullDownRefresh();
				this.$tip.toast('刷新成功!', 'success', 500);
			});
		},
		methods: {
			getData() {
				this.$store.dispatch("getUserDetail").then((res) => {
					this.list = res.wallet;
					this.balance = this.list.reduce((total, item) => {
						return (total +=
							item.usableAmount - item.transitAmount - item.freezeAmount);
					}, 0);
					this.infoId = res.info.agentNo;
					this.name = res.info.agentName;
					this.$forceUpdate()
				});
			},
			//复制用户id
			copyInfoId(infoId){
				// value是需要复制的值
				uni.setClipboardData({
					data: infoId,
					success: res=>{
						// 复制成功逻辑
					},
					fail:err=>{
						// 复制失败逻辑
					}
				});
			},
			//显示隐藏金额
			switchBalanceShow() {
				this.balanceShowFlg = !this.balanceShowFlg;
			},
			toList() {
				this.$nav.push({
					path: '/pages/home/lottery/list'
				});
			},
			navPage(router) {
				this.$nav.push(router);
			},
			earningsWithdrawalHandle(type) {
				const routeName = '/pages/earnings/earningsWithdrawal';
				this.$nav.push({
					path: routeName,
					query: {
						type: type
					}
				});
			},
			// 下拉刷新
			downRefresh() {
				this.downBackMixin(this.agentInfoHandle);
			},
			toCertification() {
				this.$nav.push({
					path: 'certification'
				});
			},
			toDetail() {
				// this.$nav.push({ path: "/tuiKeGrade" });
				// return this.$toast('敬请期待!')
			},
			toupdatePassword() {
				this.$nav.push({
					path: '/pages/myInfo/updatePassword/index'
				});
			},
			logoutHandle() {
				this.$tip.modal({
					content: '是否退出登录?'
				}).then(res => {
					console.log(res);
					this.$store.dispatch('StoreByLogout').then(res => {
						this.$nav.reLaunch({
							path: '/pages/login/index'
						});
					});
				});
			},
			itemHandle(item) {
				const routeName = item.routerLink;
				// 实名绑卡检查
				if (item.settle) {
					if (this.user.realStatus == 0) {
						this.$tip.modal({
							content: '未绑卡,前往绑卡!',
							showCancel: false
						}).then(res => {
							this.$nav.push({
								path: '/pages/myInfo/bindCard/bindCard',
								query: {
									type: 'add'
								}
							});
						});
					} else {
						this.$nav.push({
							path: routeName
						});
					}
				} else {
					this.$nav.push({
						path: routeName
					});
				}
			},
			toNotice() {
				this.$nav.push({
					path: '/pages/home/notice/notice'
				});
			},
			/* 拨打电话 */
			onCall(){
				console.log(11)
				const phoneNumber = '4006789831';
				window.location.href = `tel:${phoneNumber}`;
			},
			callPhoneNumber(){
				let _this = this;
				this.$tip.modal({
					title:'是否拨打',
					confirmText:'拨打',
					// showCancel:false,
					confirmColor:'#7B4EFF',
					content: '400 678 9831'
				}).then(res => {
					 _this.onCall()     
				}).catch(res => {
					console.log(res);
				});
			},
			/* 版本更新 */
			updateVersion(){
				this.$tip.modal({
					title:'提示',
					confirmText:'知道了',
					showCancel:false,
					confirmColor:'#7B4EFF',
					content: '当前版本1.4.1，已是最新版本'
				}).then(res => {
					console.log(res);
				});
			},
			nav(path) {
				if(path == 'logoutHandle'){
					this.updateVersion();
				}if(path == 'callPhoneNumber'){
					this.callPhoneNumber();
				}else{
					// #ifdef APP-PLUS
					if(path == '/pages/home/invitation/down-app') {
						this.$nav.push({
							path: '/pages/home/invitation/down-app-webview'
						});
					}else{
						this.$nav.push({
							path: path
						});
					}
					// #endif
					
					// #ifdef H5
						this.$nav.push({
							path: path
						});
					// #endif
				}
				
			},
		}
	};
</script>

<style lang="scss" scoped>
	$item-bg:rgb(246,245,250);
	$info-wrapper-linear-bg: linear-gradient(180deg,rgb(221,227,255), rgb(255,255,255));
	.wrapper{
		margin-bottom: 50px;
		.info-wrapper{
			padding: 36px $uni-spacing-row-lg 0px $uni-spacing-row-lg;
			// display: flex;
			// justify-content: start;
			// align-items: center;
			background:$info-wrapper-linear-bg ;
			.info-item-right{
				margin-left: $uni-spacing-col-base;
				.infoCode{
					background: #fff;
					padding: 2px 6px;
					margin-top: 4px;
					border-radius:  6px;
					font-size: $uni-font-size-sm;
					span{
						display: inline-block;
						padding: $uni-spacing-col-sm;
					}
				}
			}
		}
		.wallet-wrapper{
			padding-top: 20px;
			.wallet{
				padding:$uni-spacing-row-lg;
				color: #fff;
				background: linear-gradient(90deg,rgb(112,65,255), rgb(137,95,255));
				border-radius:$uni-border-radius-xl;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.wallet-item-left{
					.wallet-item-title{
						margin-bottom: $uni-spacing-col-base;
						font-weight: bold;
						// font-size: $uni-font-size-lg;
						color: #fff;
						span{
							display: inline-block;
							padding-left: $uni-spacing-col-sm;
						}
						.eye-hidden{
							// display: none;
						}
					}
					.amount{
						font-weight: bold;
						font-size: $uni-font-size-lg;
						color: #fff;
					}
					.amount-hidden{
						font-size:$uni-font-size-xl;
						// display: none;
					}
				}
				.wallet-item-right{
					color:$themeColor;
					font-weight: bold;
					font-size: $uni-font-size-sm;
					background: linear-gradient(-90deg, #d2c3fe, #edeaff);
					padding:$uni-spacing-row-sm $uni-spacing-row-base;
					border-radius: $uni-spacing-row-lg;
					text-align: center;
				}
			}
		}
		.function-wrapper,.service-wrapper{
			padding: $uni-spacing-row-sm $uni-spacing-row-lg;
			.title{
				margin-bottom:$uni-spacing-col-lg ;
				padding-bottom:$uni-spacing-col-lg ;
				margin-top:$uni-spacing-col-lg ;
				font-size: $uni-font-size-lg;
			}
			.function-item,.service-item{
				border-radius:$uni-border-radius-xl;
				background-color: $item-bg!important;
				overflow: hidden;
				.u-grid-item{
					background-color: $item-bg!important;
				}
			}
		}
	}
	
	
	// .my-center-header {
	// 	background: url(../../common/images/home-new/bg-up.png) no-repeat;
	// 	background-size: 100% 100%;
	// 	padding: R(20px) 0;
	// 	// display: flex;
	// 	align-items: center;
	// 	position: relative;
	// 	height: R(400px);
	// 	color: #fff;
	// 	margin-bottom: R(80px);

	// 	.top-title {
	// 		text-align: center;
	// 		position: relative;
	// 		height: R(100px);
	// 		line-height: R(100px);

	// 		.title-name {
	// 			text-align: center;
	// 			width: 100%;
	// 			font-size: R(45px);
	// 		}

	// 		.notice {
	// 			position: absolute;
	// 			right: R(40px);
	// 			font-size: R(25px);
	// 			top: 0;

	// 			image {
	// 				width: R(30);
	// 				height: R(44);
	// 			}
	// 		}
	// 	}

	// 	&-info {
	// 		width: 90%;
	// 		// height: R(340px);
	// 		align-items: center;
	// 		color: #344460;
	// 		margin: 0 auto;
	// 		background-color: #FFFFFF;
	// 		border-radius: R(20px);
	// 		margin-top: R(50px);
	// 		padding: R(30px);
	// 		box-sizing: border-box;

	// 		.user {
	// 			color: #3D4E68;
	// 			font-size: R(30px);

	// 			.myuserimage {
	// 				margin-top: R(-80px);
	// 			}
	// 		}

	// 		.header-tab {
	// 			margin-top: R(60px);
	// 			justify-content: space-around;

	// 			.tab-item {
	// 				text-align: center;
	// 				font-size: R(25px);
	// 				color: #3D4E68;
	// 				border-right: 1px solid #b5c5e1;
	// 				width: 33%;
	// 				image{
	// 					width: R(48px);
	// 					height: R(52px);
	// 				}

	// 				.list-icon {
	// 					margin-bottom: R(20px);
	// 				}
	// 			}

	// 			.tab-item:last-child {
	// 				border-right: none;
	// 			}
	// 		}
	// 	}


	// }

	// .my-section {
	// 	background-color: #FFFFFF;
	// 	border-radius: R(20px);
	// 	padding: R(30px);
	// 	width: 90%;
	// 	margin: R(120px) auto;
	// 	&-item{
	// 		margin: 0 R(20px);
	// 		border-bottom: 1px solid #b5c5e1;
	// 		padding:  R(30px) 0;
	// 		color: #3B4B66;
	// 		font-size: R(28px);
	// 		.txt{
	// 			margin-left: R(20px);
	// 		}
	// 		image{
	// 			width: R(48px);
	// 			height: R(52px);
	// 		}
	// 	}
	// 	&-item:last-child {
	// 		border-bottom: none;
	// 	}
	// }
	// .logout{
	// 	width: 90%;
	// 	margin: R(100px) auto;
	// 	text-align: center;
	// 	background-color: #CBE7FF;
	// 	border-radius: R(10px);
	// 	height: R(81px);
	// 	line-height: R(81px);
	// 	color: #008AFD;
	// 	font-weight: 400;
	// }
	
</style>